<template>
    <!-- pages/pwset/pwset.wxml -->
    <view id="My_pwset">
        <view class="text">
            <view class="big">密码设置</view>
            <view class="min">请修改您的密码，新密码不得与原密码保持一致</view>
        </view>
        <view class="edit_pw">
            <view class="l_input">
                <view class="i_name">新密码</view>
                <view class="inner_input" :class="[accord ? '' : 'err', isfocus == 'pwd' ? 'isfocus' : '']">
                    <image class="left" src="/static/img/my-img/lock.png "></image>
                    <input :focus="focusIS == 'pwd'" @change="inputChange" @blur="handleBlur" @focus="handelFocus"
                        v-model="pwd" data-pw="pwd" :type="showPwd" placeholder="请输入您的密码" />
                    <image v-if="showPwd == 'password'" @tap="toggleShowPwd" data-pw="pwd" class="right"
                        src="/static/img/my-img/eye.png"></image>
                    <image v-else @tap="toggleShowPwd" data-pw="pwd" class="right"
                        src="/static/img/my-img/shut-eye.png">
                    </image>
                </view>
            </view>
            <view class="l_input">
                <view class="i_name">确认密码</view>
                <view class="inner_input" :class="[accord ? '' : 'err', isfocus == 'newpwd' ? 'isfocus' : '']">
                    <image class="left" src="/static/img/my-img/lock.png "></image>

                    <input @blur="handleBlur" :focus="focusIS == 'newpwd'" @focus="handelFocus" v-model="newpwd"
                        @input="inputChange" data-pw="newpwd" :type="showNewPwd" placeholder="请再次输入您的密码" />
                    <image v-if="showNewPwd == 'password'" @tap="toggleShowPwd" data-pw="newpwd" class="right"
                        src="/static/img/my-img/eye.png"></image>
                    <image v-else @tap="toggleShowPwd" data-pw="newpwd" class="right"
                        src="/static/img/my-img/shut-eye.png">
                    </image>
                </view>
            </view>
            <view :class="'msg ' + (accord ? '' : 'err')">
                {{ errMsg }}
            </view>
        </view>
        <view @tap="ConfirmEdit" class="edit_btn">
            确认修改
            <image class="right" src="/static/img/my-img/check-wite@3x.png"></image>
        </view>
        <uni-popup ref="popup" z-index="3" :is-mask-click="false">
            <view class="wrapper">
                <view @tap.stop.prevent="noop" id="Confirmation_box">
                    <view class="title">
                        {{ TipsshowSet.title }}
                    </view>
                    <view class="msg">
                        {{ TipsshowSet.msg }}
                    </view>
                    <view class="agree" @tap.stop.prevent="handleAgree">
                        {{ TipsshowSet.agreeMsg }}
                        <image class="right" src="/static/img/my-img/arrow_right_md.png"></image>
                    </view>
                    <view v-if="TipsshowSet.showCancel" @tap.stop.prevent="onClickHide" class="Cancel">取消</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores/modules/member';//用户信息
const memberStore = useMemberStore();//用户状态
let showPwd: any = ref('password')
//新密码
let showNewPwd: any = ref('password')
//确认密码
let pwd = ref('')
let newpwd = ref('')
//是否一致
let accord = ref(true)
//错误提示
let errMsg = ref('密码由8~12位数字、字母任意组合而成')
let isfocus = ref('')
//弹窗组件
let TipsshowSet = reactive({
    title: '提示',
    msg: '是否确认修改当前信息',
    agreeMsg: '同意并继续',
    showCancel: true
})
//unipopup组件 遮罩层
let popup = ref<any>(null)
//关闭遮罩层
const onClickHide = () => {
    popup.value.close()
}
//是否已修改
let isEdit = ref(false)
let focusIS = ref('')
//显示密码
const toggleShowPwd = function (e: any) {
    console.log('toggleShowPwd', e.currentTarget.dataset);
    focusIS.value = e.currentTarget.dataset.pw
    if (e.currentTarget.dataset.pw == 'pwd') {
        showPwd.value = showPwd.value == 'password' ? 'text' : 'password'
    } else {
        showNewPwd.value = showNewPwd.value == 'password' ? 'text' : 'password'
    }
    handelFocus(e)
}

//获取焦点是边框
const handelFocus = (e: any) => {
    isfocus.value = e.currentTarget.dataset.pw
}

//失去时
const handleBlur = (e: any) => {
    isfocus.value = ''
}

//获取密码
const inputChange = function (e: any) {
    // 密码由8~12位数字、字母任意组合而成
    var regex = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{8,12})$/;
    if (e.currentTarget.dataset.pw == 'pwd') {
        if (!pwd.value) {
            accord.value = false
            errMsg.value = '请输入密码'
        } else if (!regex.test(pwd.value)) {
            accord.value = false
            errMsg.value = '密码由8~12位数字、字母任意组合而成'
        } else {
            if (pwd.value !== newpwd.value) {
                accord.value = false
                errMsg.value = '两次密码不一致'
            } else {
                accord.value = true
                errMsg.value = '点击按钮修改密码'
            }
        }
    } else {
        if (pwd.value !== newpwd.value) {
            accord.value = false
            errMsg.value = '两次密码不一致'
        } else if (!pwd.value) {
            accord.value = false
            errMsg.value = '请输入密码'
        } else if (!regex.test(pwd.value)) {
            accord.value = false
            errMsg.value = '密码由8~12位数字、字母任意组合而成'
        } else {
            accord.value = true
            errMsg.value = '点击按钮修改密码'
        }
    }
}



//确定修改
const ConfirmEdit = () => {
    console.log(accord.value);
    if (accord.value == false) {
        return;
    }
    if (pwd.value && newpwd.value && pwd.value == newpwd.value) {
        console.log('确定修改', pwd, newpwd);
        //打开遮罩层
        let obj = {
            title: '提示',
            msg: '是否确认修改当前信息',
            agreeMsg: '同意并继续',
            showCancel: true
        };
        //打开遮罩层
        popup.value.open('center')
        // 使用Object.assign更新
        Object.assign(TipsshowSet, obj)
        isEdit.value = false
    } else {
        uni.showToast({
            title: '请确认密码无误',
            icon: 'error',
            duration: 1500,
            mask: true,
        });
    }
}

//修改密码
const handleAgree = () => {
    if (isEdit.value) {
        setTimeout(() => {
            isEdit.value = false
            uni.clearStorage();
            uni.reLaunch({
                url: '/pages/login/login',
            });
        }, 300);
    } else {
        setTimeout(() => {
            uni.showLoading({
                title: '修改中',
                mask: true,
                success: async (result) => {
                    await memberStore.upDateuserInfo({ Password: pwd.value }, true)
                    setTimeout(() => {
                        let data = TipsshowSet;
                        data.msg = '密码设置成功，以后请使用新密码登录';
                        data.agreeMsg = '同意';
                        data.showCancel = false;
                        // 使用Object.assign更新
                        Object.assign(TipsshowSet, data);
                        //打开遮罩层
                        popup.value.open('center')
                        //修改状态改为已经修改
                        isEdit.value = true
                        uni.hideLoading();
                    }, 300);
                },
                fail: () => { },
                complete: () => { }
            });
        }, 500);
    }
}

const noop = () => {
    console.log('占位：函数 noop 未声明');
}
</script>

<style lang="scss" scoped>
/* pages/pwset/pwset.wxss */
view {
    box-sizing: border-box;
}

#My_pwset {
    height: 100vh;
    box-sizing: border-box;
    padding: 70rpx 48rpx;
    background: rgb(242, 245, 249);
    position: relative;

    .text {
        .big {
            color: rgb(9, 14, 29);
            font-family: Poppins;
            font-size: 64rpx;
            font-weight: 600;
            margin-bottom: 20rpx;
        }

        .min {
            color: rgb(61, 73, 102);
            font-family: Poppins;
            font-size: 26rpx;
            font-weight: 500;
        }
    }

    .edit_pw {
        margin: 80rpx 0;

        .msg {
            color: rgb(129, 139, 160);
            font-family: HarmonyOS Sans SC;
            font-size: 12px;
            font-weight: 400;

            &.err {
                color: #FA4D5E;
            }
        }
    }

    .edit_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0077FF;
        border-radius: 12px;
        padding: 16px 230rpx 16px 230rpx;
        color: rgb(255, 255, 255);
        font-family: Poppins;
        font-size: 32rpx;
        font-weight: 500;
        white-space: nowrap;
        position: absolute;
        bottom: 120rpx;

        image {
            margin: 0 20rpx;
            width: 36rpx;
            height: 40rpx;
        }
    }

    /*** 输入框 **/
    .l_input {
        .i_name {
            color: rgb(9, 14, 29);
            font-family: SF Pro Display;
            font-size: 14px;
            font-weight: 600;
            margin: 16rpx 0;
        }

        .inner_input {
            position: relative;
            display: flex;
            align-items: center;
            padding: 30rpx 20rpx;
            /* #FFFFFF 白色 100 */
            background: rgb(255, 255, 255);
            /* 白色背景090E1D 5% 16 32 */
            box-shadow: 0px 16px 32px 0px rgba(9, 14, 29, 0.05);
            border-radius: 24rpx;
            margin: 20rpx 0;

            &.err {
                /* #FA4D5E 红色点缀 */
                border: 1px solid rgb(250, 77, 94);
                /* 效果样式3 */
                box-shadow: 0px 0px 0px 4px rgba(250, 77, 94, 0.25);
            }

            &.isfocus {
                /* #0097ac 主色调 */
                border: 1px solid rgb(0, 119, 255);
                /* 效果样式2 */
                box-shadow: 0px 0px 0px 4px rgba(0, 119, 255, 0.25);
            }

            .left {
                margin-right: 20rpx;
            }

            .right {
                position: absolute;
                right: 20rpx;
                z-index: 2;
            }

            image {
                width: 36rpx;
                height: 36rpx;
            }


            input {
                width: 100%;
                color: rgb(61, 73, 102);
                font-family: SF Pro Display;
                font-size: 28rpx;
                font-weight: 600;
            }


        }
    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    #Confirmation_box {
        width: 600rpx;
        height: 520rpx;
        background: rgb(255, 255, 255);
        border-radius: 24px;
        padding: 40rpx 60rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;

        .agree {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 176px;
            height: 56px;
            background: rgb(0, 119, 255);
            border-radius: 12px;
            color: rgb(255, 255, 255);
            font-family: Poppins;
            font-size: 32rpx;
            font-weight: 500;


            image {
                margin: 0 20rpx;
                width: 48rpx;
                height: 48rpx;
            }
        }

        .Cancel {
            color: rgb(129, 139, 160);
            font-family: Poppins;
            font-size: 16px;
        }
    }
}
</style>